(function () {
  // 步骤3：创建echarts实例
  let myChart = echarts.init(document.querySelector(".box2"));
  console.log(myChart);

  // 步骤4：定义配置（指定图表的配置项和数据）
  const data = [
    [
      [12087, 72, 42972254, "South Korea", 1990],
      [24021, 75.4, 3397534, "New Zealand", 1990],
      [43296, 76.8, 4240375, "Norway", 1990],
      [10088, 70.8, 38195258, "Poland", 1990],
      [19349, 69.6, 147568552, "Russia", 1990],
      [10670, 67.3, 53994605, "Turkey", 1990],
    ],
    [
      [64304, 81.6, 5210967, "Norway", 2015],
      [24787, 77.3, 38611794, "Poland", 2015],
      [23038, 73.13, 143456918, "Russia", 2015],
      [19360, 76.5, 78665830, "Turkey", 2015],
      [38225, 81.4, 64715810, "United Kingdom", 2015],
      [53354, 79.1, 321773631, "United States", 2015],
    ],
  ];
  let option = {
    // color: ["#ccc", "#ccc"],
    // legend: {
    //   right: "35%",
    //   top: "80%",
    //   data: ["1990", "2015"],
    // },
    grid: {
      show: false,
    },

    xAxis: {
      splitLine: {
        lineStyle: {
          type: "dashed",
        },
      },
      axisLine: {
        lineStyle: {
          color: "#ccc",
        },
        show: true,
      },
      axisTick: { show: true },
      splitLine: { show: false },
    },
    yAxis: {
      splitLine: {
        lineStyle: {
          //   color: white,
          type: "dashed",
        },
      },

      axisLine: {
        lineStyle: {
          color: "#ccc",
        },
        show: true,
      },
      axisTick: { show: true },
      splitLine: { show: false },
      scale: true,
    },

    series: [
      {
        name: "1990",
        data: data[0],
        type: "scatter",
        symbolSize: function (data) {
          return Math.sqrt(data[2]) / 5e2;
        },
        emphasis: {
          focus: "series",
          label: {
            show: true,
            formatter: function (param) {
              return param.data[3];
            },
            position: "top",
          },
        },
        itemStyle: {
          shadowBlur: 10,
          shadowColor: "rgba(120, 36, 50, 0.5)",
          shadowOffsetY: 5,
          color: new echarts.graphic.RadialGradient(0.4, 0.3, 1, [
            {
              offset: 0,
              color: "rgb(251, 118, 123)",
            },
            {
              offset: 1,
              color: "rgb(204, 46, 72)",
            },
          ]),
        },
      },
      {
        name: "2015",
        data: data[1],
        type: "scatter",
        symbolSize: function (data) {
          return Math.sqrt(data[2]) / 5e2;
        },
        emphasis: {
          focus: "series",
          label: {
            show: true,
            formatter: function (param) {
              return param.data[3];
            },
            position: "top",
          },
        },
        itemStyle: {
          shadowBlur: 10,
          shadowColor: "rgba(25, 100, 150, 0.5)",
          shadowOffsetY: 5,
          color: new echarts.graphic.RadialGradient(0.4, 0.3, 1, [
            {
              offset: 0,
              color: "rgb(129, 227, 238)",
            },
            {
              offset: 1,
              color: "rgb(25, 183, 207)",
            },
          ]),
        },
      },
    ],
  };

  // 步骤5：使用刚指定的配置项和数据显示图表
  myChart.setOption(option);

    window.onresize = function () {
      myChart.resize();
    };
})();
